<template>
  <div class="content">
    <div>
      <img src="@/assets/images/skill/banner.jpg" style="width: 100%">
    </div>
    <div class="content-block">
      <div class="content-title">
        <div class="content-title-top">
          <div class="btn2 content-title-division"></div>
          <div class="title-block">
            <div class="content-title-text">政策补贴</div>
          </div>
        </div>
      </div>
      <template v-if="newsList.length>0">
        <div class="content-body" v-loading="newsLoading">
          <div class="content-body-element px" v-for="(item,index) in newsList" @click="getNewById(item.id)">
            <div class="element-news">
                <img class="element-news-img" :src="item.ima_url" >
            </div>
            <div class="element-news">
              <div class="element-news-title">{{item.title}}</div>
              <div class="element-news-content">{{item.abstract}}</div>
              <div class="element-news-content">发布时间：{{item.crt_time}}</div>
            </div>
          </div>
        </div>
      </template>
      <el-empty v-else></el-empty>

      <div v-if="newsList.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
        <el-pagination
            background
            :page-size="limit"
            layout="prev, pager, next"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {getNewsList} from "@/api/notice";

export default {
  name: "skillIndex",
  data() {
    return {
      newsLoading:false,
      newsList: [],
      page: 1,
      limit: 8,
      count: 0
    }
  },
  methods: {
    getNoticeList(){
      this.newsLoading=true
      getNewsList({type:1,page: this.page,limit: this.limit}).then((res)=>{
        this.newsList=res.list
        this.count=res.count
      }).finally(()=>{
        this.newsLoading=false
      })
    },
    getNewById(newsId) {
      this.$router.push({
        name: 'detail',
        query: {
          id: newsId,
          type: 1
        }
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getNewsList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getNewsList()
    },
  },
  mounted() {
    this.getNoticeList()
  }
}
</script>

<style lang="scss" scoped>

.content{
  background-color: #F6F6F6;

  .content-block{
    width: $contentWidth;
    margin: 0 auto;
    margin-top: 16px;
    min-height: $fullMinHeight;
    .content-title{
      .content-title-top{
        padding: 15px 0 0 20px;
        display: flex;
        background-color: #FFFFFF;
        min-height: 60px;
        .content-title-division{
          width: 8px;
          height: 20px;
          background-color: #FB3245;
          margin-top: 5px;

        }
        .title-block{
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .content-title-text{
            color: #FD7628;
            font-size: 20px;
            font-weight: bold;
            padding-left: 10px;
            cursor: pointer;
            position: relative;
          }
          .more{
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
    .content-body{
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;
      width: 100%;
      .px{
        display: flex;
      }
      .content-body-element{
        background-color: #FFFFFF;
        width: 595px;
        height: 175px;
        margin-top: 10px;
        cursor: pointer;
        margin-right: 10px;

        .body-top{
          margin: 20px;
          height: 40px;
          border-bottom:1px solid #DBDBDB;
          display: flex;
          justify-content: space-between;
          .top-title{
            font-size: 18px;
            font-weight: bold;
          }
          .top-butte{
            width: 95px;
            height: 30px;
          }
        }
        .body-bottom{
          padding-left: 15px;
          .body-bottom-content{
            height: 25px;
            .bottom-content-title{
              font-size: 14px;
              margin-left: 10px;
            }

            .content-title-color{
              color: #adadad;
            }
            .body-bottom-icon{
              color: #FD7628;

            }
          }

        }
        .element-news{
          margin: 20px 0 0 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 76%;
          .element-news-img{
            border-radius: 10px;
            width: 150px;
            height: 150px;
          }
          .element-news-title{
            font-size: 20px;
          }
          .element-news-content{
            font-size: 14px;
            padding-top: 10px;
            color: #adadad;
            width: 400px;
          }
        }
      }
      .content-body-element:nth-child(2n){
        margin-right: 0;
      }
      .content-video{
        width: calc((100% - 40px) / 4);
        min-height: 190px;
        background-color: #FFFFFF;
        margin-top: 10px;
        margin-right: 13px;

        .mask{
          min-width:290px;
          min-height: 165px;
          z-index: 1;
          position: absolute;
          background: rgba(0,0,0,0.3);
          cursor: pointer;
          .video-item{

          }
          .mask-video-img{
            width: 50px;
            height: 50px;
            margin: 20% 0 0 42%;
          }
        }

        .video-img{
          width: 290px;
          height: 165px;
        }
        .video-text{

          margin: 10px;
          font-size: 20px;
        }
      }
      .content-video:nth-child(4n){
        margin-right: 0;
      }
    }
  }

}


</style>
